<template>
    <section class="form-warpper">
        <el-table :data="state.ruleForm" style="width: 100%" border>
           
            
            <el-table-column label="合同开始日期">
                <template #default="scope">
                    <el-date-picker value-format="YYYY-MM-DD" 
                        v-model="scope.row.contractStartDate" type="date" 
                        placeholder="请选择入合同开始日期" size="mini" />
                </template>
            </el-table-column>
            <el-table-column label="合同终止日期">
                <template #default="scope">
                    <el-date-picker value-format="YYYY-MM-DD" 
                        v-model="scope.row.contractEndDate" type="date" 
                        placeholder="请选择合同终止日期" size="mini" />
                </template>
            </el-table-column>

            <el-table-column label="单位名称">
                <template #default="scope">
                    <el-input placeholder="请输入单位名称" size="mini" v-model="scope.row.unitName"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="工作地点">
                <template #default="scope">
                    <el-input placeholder="请输入工作地点" size="mini" v-model="scope.row.workSite"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="担任职务">
                <template #default="scope">
                    <el-input placeholder="请输入担任职务" size="mini" v-model="scope.row.position"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="scope">
                    <el-button plan type="danger" size="mini" @click="removeHanlde(scope.row.id)">移除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button plan type="primary" style="margin-top: 15px;" size="middle" @click="addReport">+ 新增</el-button>
    </section>
</template>

<script setup lang="ts">
import { reactive, defineExpose } from 'vue'

interface IFormData {
    id: string | number, 
    contractStartDate: string, 
    contractEndDate: string, 
    unitName: string, 
    workSite: string,
    position: string
}

const initData = () => ({ 
    contractStartDate: '', // 合同开始日期 
    contractEndDate: '', // 合同终止日期 
    unitName: '', // 单位名称
    workSite: '', // 工作地点
    position: '', // 担任职务
    id: `${Date.now()}`
});

// 定义table数据
const state = reactive({
    ruleForm: [
        { id: '', contractStartDate: '', contractEndDate: '', unitName: '', workSite: '',position:''}
    ] as Array<IFormData>
})

// 添加行
const addReport = () => {
    state.ruleForm.push(initData())
}

// 删除行
const removeHanlde = (id: string) => {
    state.ruleForm = state.ruleForm.filter(item => item.id !== id)
}

// 获取数据
const getData = () => {
    if(!state.ruleForm.length) {
        return [initData()]
    }
    return state.ruleForm 
}

const setData = (list: Array<IFormData > | Array<any>) => { 
    if(list.length) {
        state.ruleForm = [];
        (list || []).forEach((item, index) => {
            state.ruleForm.push({
                id: item.id, 
                contractStartDate: item.contractStartDate, 
                contractEndDate: item.contractEndDate, 
                unitName: item.unitName, 
                workSite: item.workSite,
                position:item.position
            })
        }) 
    } 
}
// 暴露获取表单数据方法
defineExpose({ getData ,setData})
</script>